<template>
  <div class="left">
      <div class="left-box1" id="reson"></div>
      <div class="left-box2">
          <div class="title">
              <i class="el-icon-message-solid" style="margin-top: 5px;margin-right: 30px;margin-left: 10px;"></i>
              <span>人工介入处理记录</span>
          </div>
          <div id="carbar" class="carmid" >
            <div style="float:left;width: 100%;height:100%;overflow: hidden;color: #fff;">
              <vue-seamless-scroll :data="list" :class-option="classOption">
                <el-row :gutter="20" :class="(index+1)%2 ==0?'tabulationrowback':'tabulationrow'" type="flex" align="middle" justify="center"
                          v-for="(item,index) in list" :key='index'>
                    <el-col :span="1"  class="col_content" style="color: #13f6f9;"><i class="el-icon-bell"></i></el-col>
                    <el-col :span="15" class="col_content">{{item.assistId}}已处理{{item.custWcId}}{{item.keywords}}关键字提醒介入</el-col>
                    
                    <el-col :span="4" class="col_content" style="color: #ffda0a;">
                      <template>
                          <span>{{ parseTime(item.handleTime, '{m}-{d} {h}:{i}') }}</span>
                      </template>
                    </el-col>
                  </el-row>
              </vue-seamless-scroll>
            </div>
          </div>
      </div>
  </div>
</template>

<script>
import moment from "moment";
import * as echarts from 'echarts'
import request from '@/utils/request'
export default {
name: "cockpitLeft",

data() {
  return {
      list:[],
      queryParams: {
        pageNum: 1,
        pageSize: 999,
        handleState:1,
      }
  };
},
components: {

},
mounted() {
  this.getTableList()
  this.getHandleList()
},
computed: {
  classOption() {
    return {
      step: 0.2, // 数值越大速度滚动越快
      limitMoveNum: 7, // 开始无缝滚动的数据量 this.dataList.length
      hoverStop: true, // 是否开启鼠标悬停stop
      direction: 1, // 0向下 1向上 2向左 3向右
      openWatch: true, // 开启数据实时监控刷新dom
      singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
      singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
      waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
    };
  }
},
methods: {
  getReson(name,xData,data){
      var chartDom = document.getElementById('reson');
      var myChart = echarts.init(chartDom);
      myChart.clear();
      let listener = function () {
         myChart.resize();
      };
      window.addEventListener("resize", listener);
      var option;
      option = {
          title: {
            left: "center",
            top: 'top', 
            text:'人物画像分析',
            textStyle: {
              color: '#fff', 
              fontSize: 14 
            },
          },
          tooltip: {
          	trigger: 'axis',
          	axisPointer: { // 坐标轴指示器，坐标轴触发有效
          		type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          	}
          },
          grid: {
          	left: '2%',
          	right: '4%',
          	bottom: '0',
          	top: '30%',
          	containLabel: true
          },
          legend: {
          	data:name,
          	top: "10%",
          	textStyle: {
          		color: "#fff",
          		fontSize: 12
          	},
          	itemWidth: 12,
          	itemHeight: 10,
          	// itemGap: 35
          },
          xAxis: {
          	type: 'category',
          	data: xData,
          	axisLine: {
          		lineStyle: {
          			color: '#8c9493'
          		}
          	},
          	axisLabel: {
          		textStyle: {
          			fontSize: 12,
                color:'#fff'
          		}
          	},
          },
          
          yAxis: {
          	// name: '位',
          	nameTextStyle: {
          		color: "#fff"
          	},
          	type: 'value',
          	// max: '150',
          	axisLine: {
          		show: false,
          		lineStyle: {
          			color: '#fff'
          		}
          	},
          	splitLine: {
          		show: true,
          		lineStyle: {
          			color: '#bbbbbb'
          		}
          	},
          },
          series: [{
          		name: name[0],
          		type: 'bar',
          		barWidth: '25%',
          		itemStyle: {
          			normal: {
          				color: '#1356cf'
          			},
          		},
          		data: data[0]
          	},
          	{
          		name: name[1],
          		type: 'bar',
          		barWidth: '25%',
          		itemStyle: {
          			normal: {
          				color: '#f9f7ea'
          			}
          
          		},
          		data: data[1]
          	},
            {
          		name: name[2],
          		type: 'bar',
          		barWidth: '25%',
          		itemStyle: {
          			normal: {
          				color: '#58a55c'
          			}
          
          		},
          		data: [2]
          	},
            {
          		name: name[3],
          		type: 'bar',
          		barWidth: '25%',
          		itemStyle: {
          			normal: {
          				color: '#f2bd42'
          			}
          
          		},
          		data: data[3]
          	}
          ]
      };
      option && myChart.setOption(option);
  },
  getHandleList(){
    // onHandleList().then(res=>{
    //   //console.log(res)
    //   if(res.code==200){
    //      if(res.data){
    //        this.list=res.data
    //      }
    //   }
    // })
      listWcChatRemind(this.queryParams).then(res => {
        if (res['success']) {
          const dt = res['data'];
          this.list = dt['records'];
        }
      });
  },
  getTableList(){
    const currentMonth = moment().month() + 1;
    var name=[]
    var xData=[]
    var data=[[],[],[],[]]
    for(var i=1;i<=currentMonth;i++){
      xData.push(i+"月")
      data[0].push(0)
      data[1].push(0)
      data[2].push(0)
      data[3].push(0)
    }
    onTableList().then(res=>{
        //console.log(res)    
        if(res.code==200){
           if(res.data){
            res.data.forEach(element => {
                if(name.indexOf(element.tagName)==-1){
                  name.push(element.tagName)
                }
                var num=parseInt(element.yearMonthm.split('-')[1])-1 
                var idx=name.indexOf(element.tagName)
                data[idx][num]=element.countNumber
            });
           }
        }
        this.getReson(name,xData,data)
        //console.log(xData,name,data)    
    })
  }
},
};
// 查询标签
export function onTableList() {
  return request({
    url: '/wxassistant/wcuser_lable_copy/GetLableProperty',
    method: 'get',
  })
}
 // 查询已处理人工介入
 export function onHandleList() {
  return request({
    url: '/report/processing',
    method: 'get',
  })
}
//查询已处理聊天提醒
export function listWcChatRemind(query) {
  return request({
    url: '/wxassistant/wcchat_remind/page',
    method: 'get',
    params: query
  })
}
</script>

<style scoped lang="scss">
 .left{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
 }
 .left-box1{
     width: 100%;
     height: 40%;
     background-image:  url(../../../assets/images/box1.png);
     background-size: 100% 100%;
     padding: 35px;
     padding-bottom: 40px;
 }
 .left-box2{
     display: flex;
     flex-direction: column;
     height: 60%;
     width: 100%;
     margin-top: 20px;
     font-size: 14px;
     .title{
        width: 100%;
        background-color: #0c5f72b4;
        height: 25px;
        border-radius: 3px;
        line-height: 25px;
        color: #13f6f9;
        margin-bottom: 5px;
     }
     .carmid {
       height:85%;
       padding:16px 10px;
       background-image: url('../../../assets/images/box2.png');
       background-size: 100% 100%;
       float: left;
       font-size: 13px;
       .tabulationrow{
         height: 25px;
         background-color: #83929a;
       }
       .tabulationrowback{
          height: 25px;
          background-color: #404e5d;
       }
     }
     .col_tal{
       font-weight: 500;
       background-image:-webkit-linear-gradient(top, #e3d4d4, #a8c2de, #5fb3ea);
       -webkit-background-clip:text;
       -webkit-text-fill-color:transparent;
       letter-spacing: 0px;
     }
     .col_content{
       overflow: hidden;  /*溢出隐藏*/
      //  letter-spacing: 2px;
       /*text-overflow: ellipsis; !*以省略号...显示*!*/
       white-space: nowrap;  /*强制不换行*/
     }

 }
</style>